<!doctype html>
<html><head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style type='text/css'>
		html { font-family:Helvetica; color:#222; }
		h1 { color:steelblue; font-size:24px; margin-top:24px; }
		button { margin:0 3px 10px; font-size:12px; }
		.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
	</style>
</head><body>
	<h1>WebViewJavascriptBridge Demo</h1>
	<script>
	window.onerror = function(err) {
		//log('window.onerror: ' + err)
	}
    /*
    // 当iOS 环境加载成功后，会调用此方法
    function SHiOSInjection() {
        // 1. 此方法用于提交与相应页面事件
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
        
        // 2. 页面相关事件绑定
        setupWebViewJavascriptBridge(function(bridge) {
                                     var uniqueId = 1
                                     
                                     function log(message, data) {
                                     var log = document.getElementById('log')
                                     var el = document.createElement('div')
                                     el.className = 'logLine'
                                     el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                                     if (log.children.length) { log.insertBefore(el, log.children[0]) }
                                     else { log.appendChild(el) }
                                     }
                                     // 注册JS事件供 APP调用
                                     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                                                            log('ObjC called testJavascriptHandler with', data)
                                                            var responseData = { 'Javascript Says':'Right back atcha!' }
                                                            log('JS responding with', responseData)
                                                            responseCallback(responseData)
                                                            })
                                     
                                     document.body.appendChild(document.createElement('br'))
                                     // 3. 页面事件注册
                                     var callbackButton = document.getElementById('button')//.appendChild(document.createElement('button'))
                                     callbackButton.innerHTML = 'Fire testObjcCallback'
                                     callbackButton.onclick = function(e) {
                                     e.preventDefault()
                                     log('JS calling handler "testObjcCallback"')
                                     // 4. 调用App 对应事件函数
                                     // testObjcCallback： 调用函数名称
                                     // {'foo': 'bar'}： 传递参数使用 Key-Value 方式
                                     // response ：从APP内返回的消息
                                     bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                                                        log('JS got response', response)
                                                        })
                                     }
                                     })
    };
    
    
    
    
    
    var shaohuo = window.shaohuo || {};
    shaohuo.javascriptBridge = new function() {
        setupWebViewJavascriptBridge = function(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        };
        
        this.onShareAppMessage = function(params) {
            self.setupWebViewJavascriptBridge(function(bridge){
                                         bridge.callHandler("onShareAppMessage",params, function(response){
                                                            params.success(response)
                                                            });
                                         });
        };
    };
   
    var shaohuo = window.shaohuo || {};
    shaohuo.javascriptBridge = new function() {};
    
    //function initlizationShaohuoInjectionJS() {
        shaohuo.javascriptBridge = new function() {
            setupWebViewJavascriptBridge = function(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            };
            
            this.onShareAppMessage = function(params) {
                setupWebViewJavascriptBridge(function(bridge){
                                             bridge.callHandler("onShareAppMessage",bridge, function(response){
                                                                params.success(response)
                                                                });
                                             });
            };
        };
    //}
     
    
    var shaohuo = window.shaohuo || {};
    shaohuo.javascriptBridge = new function() {};
    
    shaohuo.javascriptBridge.setupWebViewJavascriptBridge = function(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    };
    
    shaohuo.javascriptBridge.onShareAppMessage = function(params) {
        shaohuo.javascriptBridge.setupWebViewJavascriptBridge(function(bridge){
                                                              bridge.callHandler("onShareAppMessage",bridge, function(response){
                                                                                 params.success(response)
                                                                                 });
                                                              });
    };
    
    
    var shaohuo = window.shaohuo || {};
    shaohuo.javascriptBridge = new function() {
        
        shaohuo.javascriptBridge.ptototype = function() {
            setupWebViewJavascriptBridge = function(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            };
            setupWebViewJavascriptBridge = function(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            };
        };
 
    
   	var shaohuo = window.shaohuo || {};
    shaohuo.javascriptBridge = new function() {};
    
    shaohuo.javascriptBridge.ptototype.setupWebViewJavascriptBridge = function() {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    };
    
    shaohuo.javascriptBridge.ptototype.onShareAppMessage = function(params) {
        shaohuo.javascriptBridge.setupWebViewJavascriptBridge(function(bridge){
                                                              
                                                              bridge.callHandler("onShareAppMessage",bridge, function(response){
                                                                                 params.success(response)
                                                                                 });
                                                              
                                                              });
    };
     
    
    (function(){
     window["shaohuo"] = {};
     
     function setupWebViewJavascriptBridge(callback) {
     if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
     if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
     window.WVJBCallbacks = [callback];
     var WVJBIframe = document.createElement('iframe');
     WVJBIframe.style.display = 'none';
     WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
     document.documentElement.appendChild(WVJBIframe);
     setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
     };
     
     function onShareAppMessage(params) {
     setupWebViewJavascriptBridge(function(bridge){
                                  bridge.callHandler("onShareAppMessage",bridge, function(response){
                                                     params.success(response)
                                                     });
                                  
                                  });
     };
     
     window['shaohuo']['setupWebViewJavascriptBridge'] = setupWebViewJavascriptBridge;
     window['shaohuo']['onShareAppMessage'] = onShareAppMessage;
     })();
     */
    
    var shaohuo = window.shaohuo || {};
    shaohuo.javascriptBridge = new function() {
        setupWebViewJavascriptBridge = function(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        };
        
        this.onShareAppMessage = function(params) {
            self.setupWebViewJavascriptBridge(function(bridge){
                                              bridge.callHandler("onShareAppMessage",params, function(response){
                                                                 params.success(response)
                                                                 });
                                              });
                                              
        };
    };
    
    var uniqueId = 1;

    function log(message, data) {
        var log = document.getElementById('log')
        var el = document.createElement('div')
        el.className = 'logLine'
        el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
        if (log.children.length) { log.insertBefore(el, log.children[0]) }
        else { log.appendChild(el) }
    }

function click() {
    log('JS calling handler "testObjcCallback"')
    
    shaohuo.javascriptBridge.onShareAppMessage({
                                               "title": "title1",
                                               "desc": "dese",
                                               "link":"link",
                                               "imgUrl":"http://www.baidu.com",
                                               "type":"1",
                                               "dataUrl":"text",
                                               "success":function(res){
                                               log("success","");
                                               },
                                               "error":function(res){
                                               log("error","");
                                               }
                                               
                                               });
}

	</script>
	<div id='buttons'></div>
    
        <button id="button" > testObjcCallback </button>
    <div id='log'></div>
    
    <script>
        //shaohuo.javascriptBridge.readyExecute();
        //shaohuo.javascriptBridge.readyExecute["functionName"]();
        
        var callbackButton = document.getElementById('button')//.appendChild(document.createElement('button'))
        callbackButton.innerHTML = 'Fire testObjcCallback'
        callbackButton.onclick = function(e) {
            e.preventDefault()
            log('JS calling handler "testObjcCallback"')
            
            shaohuo.javascriptBridge.onShareAppMessage({
                                                       "title": "title1",
                                                       "desc": "dese",
                                                       "link":"link",
                                                       "imgUrl":"http://www.baidu.com",
                                                       "type":"1",
                                                       "dataUrl":"text",
                                                       "success":function(res){
                                                            log("success","");
                                                       },
                                                       "error":function(res){
                                                            log("error","");
                                                       }
                                                                
                                                       });
        }
        
        </script>
</body></html>
